<template>
  <div class="content-box" v-loading="loading">
    <!-- 客户信息 -->
     <div class="customerInfo">
       <div class="cu_title">客户信息</div>
       <div class="content">
          <div class="grid">
            <div :class="['grid_item',device === 'desktop'?'fourEqualParts':'']" v-for="item in this.customerInfo['isCar']?customerLabelList:customerLabelList.filter(pre=>!pre.controlProp)" :key="item.value">
                <div class="name">{{ item.name }}</div>
                <div class="prop" :style="{width: device === 'desktop'?'250px':'170px'}">
                  <div v-if="getLength(getItemValue(item))<customerLimitLength" class="ellipsis">
                    <span :style="{color: item.prop === 'isCar'?item.textColor[getItemValue(item)]:''}">{{ getItemValue(item) }}</span>
                  </div>
                  <template v-else>
                    <el-tooltip 
                      :content="getItemValue(item)" placement="top"> 
                      <div class="ellipsis">{{ getItemValue(item) }}</div>
                    </el-tooltip>
                  </template>
                </div>
            </div>
          </div>
       </div>
     </div>
    <!-- 进件信息 -->
    <div class="incomingPartsInfo">
      <div class="cu_title">进件信息</div>
      <div class="content">
        <div class="grid">
            <div :class="['grid_item',device === 'desktop'?'threeEqualParts':'']" v-for="item in incomingPartsLabelList" :key="item.value">
                <div class="name">{{ item.name }}</div>
                <div class="prop" :style="{width: device === 'desktop'?'350px':'170px'}">
                  <div v-if="getLength(getItemValue(item))<incomingPartsLimitLength" class="ellipsis">{{ getItemValue(item) }}</div>
                  <template v-else>
                    <el-tooltip 
                      :content="getItemValue(item)" placement="top"> 
                      <div class="ellipsis">{{ getItemValue(item) }}</div>
                    </el-tooltip>
                  </template>
                </div>
            </div>
        </div>
      </div>
    </div>
    <div class="backBtn">
      <el-button @click="goback">返回</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getDownCompanyById } from "@/api/customer/customerDetails";

export default {
  name: 'Detail',
  data() {
    return {
      // 客户信息label列表
      customerLabelList:[
        {name:'姓名',prop:'userName'},
        {name:'手机号',prop:'phone'},
        {name:'身份证号',prop:'idCard'},
        {name:'贷款金额',prop:'loanMoney'},
        {
          name:'性别',
          prop:'sex',
          options:[
            {label:'女',value:0},
            {label:'男',value:1},
          ]
        },
        {name:'申请时间',prop:'authTime'},
        {name:'年龄',prop:'age'},
        {
          name:'营业执照',
          prop:'busLicense',
          options:[
            {label:'无',value:0},
            {label:'两年以下',value:1},
            {label:'两年以上',value:2}
          ]
        },
        {
          name:'信用情况',
          prop:'credit',
          options:[
            {label:'无',value:0},
            {label:'有逾期',value:1},
            {label:'无逾期',value:2}
          ]
        },
        {
          name:'芝麻分',
          prop:'sesame',
          options:[
            {label:'无',value:0},
            {label:'550分以下',value:1},
            {label:'550~599',value:2},
            {label:'600~649',value:3},
            {label:'650~699',value:4},
            {label:'700分以上',value:5}
          ]
        },
        {
          name:'京东白条',
          prop:'baiTiao',
          options:[
            {label:'无',value:0},
            {label:'有',value:1}
          ]
        },
        {
          name:'花呗',
          prop:'huaBei',
          options:[
            {label:'无',value:0},
            {label:'有',value:1}
          ]
        },
        {
          name:'信用卡',
          prop:'creditCard',
          options:[
            {label:'无',value:0},
            {label:'2万元以内',value:1},
            {label:'2万元以上',value:2}
          ]
        },
        {
          name:'房',
          prop:'house',
          options:[
            {label:'无',value:0},
            {label:'按揭房产',value:1},
            {label:'全款房产',value:2}
          ]
        },
        {
          name:'车',
          prop:'car',
          options:[
            {label:'无',value:0},
            {label:'按揭车',value:1},
            {label:'全款车',value:2}
          ]
        },
        {
          name:'社保',
          prop:'social',
          options:[
            {label:'无',value:0},
            {label:'6个月以下',value:1},
            {label:'6个月及以上',value:2}
          ]
        },
        {
          name:'公积金',
          prop:'fund',
          options:[
            {label:'无',value:0},
            {label:'未满6个月',value:1},
            {label:'6个月及以上',value:2},
          ]
        },
        {
          name:'职业身份',
          prop:'job',
          options:[
            {label:'自由职业者',value:1},
            {label:'上班族',value:2},
            {label:'(公务员/事业/国企)',value:3},
            {label:'企业主',value:4},
            {label:'个体户',value:5},
          ]
        },
        {
          name:'工龄',
          prop:'jobTime',
          options:[
            {label:'无',value:0},
            {label:'0-6个月',value:1},
            {label:'6-12个月',value:2},
            {label:'12个月以上',value:3},
          ]
        },
        {name:'最低月收入',prop:'minIncome'},
        {name:'经营流水',prop:'incomeWater'},
        {
          name:'工资发放形式',
          prop:'wages',
          options:[
            {label:'无',value:0},
            {label:'银行卡',value:1},
            {label:'现金',value:2},
            {label:'银行转账',value:3},
            {label:'(微信、支付宝)',value:4},
          ]
        },
        {
          name:'学历',
          prop:'education',
          options:[
            {label:'无',value:0},
            {label:'初中及以下',value:1},
            {label:'高中',value:2},
            {label:'大专',value:3},
            {label:'本科',value:4},
            {label:'研究生及以上',value:5}
          ]
        },
        {
          name:'保险保单',
          prop:'policy',
          options:[
            {label:'无',value:0},
            {label:'1年以内',value:1},
            {label:'1年以上',value:2}
          ]
        },
        {
          name:'所属省份',
          prop:'provinceName',
        },
        {
          name:'所属城市',
          prop:'cityName',
        },
        {
          name:'贷款期限(月)',
          prop:'termNum',
        },
        {
          name:'贷款用途',
          prop:'purpose',
          options:[
            {label:'无',value:0},
            {label:'购房',value:1},
            {label:'结婚',value:2},
            {label:'消费',value:3},
            {label:'教育培训',value:4},
            {label:'购车',value:5},
            {label:'装修',value:6},
          ]
        },
        {
          name:'客户状态',
          prop:'sysStatus',
          options:[
            {label:'新增',value:0},
            {label:'已读',value:1},
          ]
        },
        {
          name:'客户星级',
          prop:'userLevel',
          options:[
          { label: "未打星级",value: -1,},
          { label: "0星",value: 0, },
          { label: "1星",value: 1, },
          { label: "2星",value: 2, },
          { label: "3星",value: 3, },
          { label: "4星",value: 4, },
          { label: "5星",value: 5, },
          ]
        },
        {name:'业务员',prop:'downUserName'},
        {
          name:'车抵',
          prop:'isCar',
          options:[
            {label:'是',value:1},
            {label:'否',value:0},
          ],
          textColor:{// 用于标记文字颜色
            '是':'#67c23a',
            '否':'#e6a23c',
          },
        },
        {name:'车牌号',prop:'carNo',controlProp:'isCar',},
        {name:'车架号',prop:'carFrame',controlProp:'isCar',},
        {name:'车牌所在地',prop:'carArea',controlProp:'isCar',},
        {name:'购买日期',prop:'carGet',controlProp:'isCar',},
        {
          name:'车辆里程',
          prop:'carKm',
          specialMapping:true,// 如果options有对应映射值显示对应label,否则直接显示数值
          controlProp:'isCar',
          options:[
            {label:'未知',value:-1},
          ]
        },
         {
          name:'车辆能源',
          prop:'carEnergy',
          controlProp:'isCar',
          options:[
            { label: "未知",value: 0, },
            { label: "汽油",value: 1, },
            { label: "柴油",value: 2, },
            { label: "电动车",value: 3, },
            { label: "普通混合动力车",value: 4, },
            { label: "插电式混合动力车",value: 5, },
            { label: "其他",value: 6, },
          ],
        },
        {
          name:'维修次数',
          prop:'carMend',
          specialMapping:true,// 如果options有对应映射值显示对应label,否则直接显示数值
          controlProp:'isCar',
          options:[
            {label:'未知',value:-1},
          ]
        },
        {
          name:'抵押状态',
          prop:'carMortgage',
          controlProp:'isCar',
          options:[
            {label:'未知',value:0},
            {label:'无抵押',value:1},
            {label:'有抵押',value:2},
          ]
        },
        {
          name:'车辆所属',
          prop:'carOwner',
          controlProp:'isCar',
          options:[
            {label:'未知',value:0},
            {label:'个人',value:1},
            {label:'公司',value:2},
            {label:'其他',value:3},
          ]
        },
        {
          name:'购车方式',
          prop:'carPay',
          controlProp:'isCar',
          options:[
            {label:'未知',value:0},
            {label:'分期未结清',value:1},
            {label:'分期已结清',value:2},
            {label:'全款',value:3},
          ]
        },
        {
          name:'车辆类型',
          prop:'carType',
          controlProp:'isCar',
          options:[
            { label: "未知",value: 0, },
            { label: "轿车",value: 1, },
            { label: "SUV",value: 2, },
            { label: "MPV",value: 3, },
            { label: "皮卡",value: 4, },
            { label: "跑车",value: 5, },
            { label: "货车",value: 6, },
            { label: "客车",value: 7, },
            { label: "工程车",value: 8, },
            { label: "其他",value: 9, },
          ],
        },

      ],
      // 进件信息label列表
      incomingPartsLabelList:[
        {name:'渠道名称',prop:'upProductName'},
        {name:'渠道公司简称',prop:'upSimpleName'},
        {name:'渠道公司名称',prop:'upCompanyName'},
        {
          name:'渠道标签',
          prop:'upProductLabel',
          options:[
            {label:'平台',value:1},
            {label:'机构',value:2},
          ]
        },
        {name:'渠道管理人',prop:'upManageName'},
        {name:'机构产品名称',prop:'downProductName'},
        {
          name:'机构标签',
          prop:'downProductLabel',
          options:[
            {label:'平台',value:1},
            {label:'机构',value:2}
          ]
        },
        {
          name:'机构类型',
          prop:'downProductType',
          options:[
            {label:'api-全流程',value:1},
            {label:'api-半流程',value:2},
            {label:'CRM(用我们系统)',value:3}
          ]
        },
        {
          name:'产品结算模式',
          prop:'downRewardType',
          options:[
            {label:'固定',value:0},
            {label:'分润',value:1},
          ]
        },
        {name:'产品管理人',prop:'downManageName'},
        {
          name:'推送状态',
          prop:'pushStatus',
          options:[
            {label:'待推送',value:0},
            {label:'处理中',value:1},
            {label:'推送成功',value:2},
            {label:'推送失败',value:3},
            {label:'流失',value:4},
          ]
        },
        {name:'用户ip',prop:'ip'},
        {name:'产品价格',prop:'downSellMoney'},
        {name:'渠道报价',prop:'sysSellMoney'},
        {name:'收益',prop:'sysRevenueMoney'},
        {name:'推送时间',prop:'pushTime'},
        {name:'手机号MD5',prop:'phoneMd5'},
        {name:'分配时间',prop:'downUserTime'},
        {name:'订单号',prop:'orderId'},
      ],
      // 详情信息加载状态
      loading:false,
      // 客户详情信息
      customerInfo:{},
    };
  },
  computed: {
    ...mapGetters(["device"]),
     // 将数组转换为对象形式
     ArrayFormatObj:()=>{
        return (arr)=>{
          return arr.reduce((pre, cur)=>{
            pre[cur.value] = cur.label;
            return pre;
          },{})
        }
     },
     // 客户信息限制长度
     customerLimitLength(){
       return this.device === "mobile"? 20 : 30;
     },
     // 进件信息限制长度
     incomingPartsLimitLength(){
       return this.device === "mobile"? 20 : 40;
     }

  },
  created(){
    if(this.$route?.query?.id){
      this.getCustomerById(this.$route.query?.id)
    }
  },
  methods: {
    // 根据客户id查询客户详细信息
    getCustomerById(id){ 
      this.loading = true;
      getDownCompanyById(id).then(res=>{
          console.log(res);
          this.customerInfo = res?.data
          this.loading = false          
       })
    },
     // 获取项的值
     getItemValue(item) {
      return item.options
        ?  (item.specialMapping? (this.ArrayFormatObj(item.options)[this.customerInfo[item.prop]] || this.customerInfo[item.prop]):this.ArrayFormatObj(item.options)[this.customerInfo[item.prop]])
        : this.customerInfo[item.prop];
    },
    // 获取字符的长度
    getLength(value) {
      if (typeof value === 'string') {
        return value.length;
      } else if (Array.isArray(value)) {
        return value.length;
      } else if (typeof value === 'object' && value !== null) {
        return Object.keys(value).length;
      } else if (typeof value === 'number') {
        return value.toString().length;
      } else if (typeof value === 'boolean') {
        return value.toString().length;
      } else if (value === null) {
        return 'null'.length;
      } else if (value === undefined) {
        return 'undefined'.length;
      } else {
        return 0; // 其他类型或未知类型
      }
    },
    goback(){
      // 关闭当前页签
      this.$store.dispatch('tagsView/delView', this.$route)
      // 返回上一个页面
      this.$router.go(-1)
    }
  }
};
</script>

<style scoped lang='scss'>
.cu_title{
  color: #409EFF;
  font-weight: 500;
}
.content{
  margin: 20px 0 20px;
  padding: 20px;
  background: #fff;
  align-items: flex-start;
  border-radius: 6px;
}
.grid{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  border-left: 1px solid #d4d4d4;
  border-top: 1px solid #d4d4d4;
  .grid_item{
    flex: 1;
    height: 40px;
    display: flex;
    font-size: 14px;
    border-right: 1px solid #d4d4d4;
    border-bottom: 1px solid #d4d4d4;
    color: #333;
    .name{
      line-height: 40px;
      width: 100px;
      text-align: center;
      background-color: #e9e5e5;
      border-right: 1px solid #d4d4d4;
    }
    .prop{
      line-height: 40px;
      width: 170px;
      padding:0 8px;
      box-sizing: border-box;
      background-color: #fff;
    }
  }
  // 四等分样式
  .fourEqualParts{
    flex: 1 1 25%; // 每个子盒子占 25% 的宽度，最多 4 个子盒子一行
    max-width: 25%; // 最大宽度为 25%，确保即使在一行中不足四个子元素时，每个子元素的宽度也不会超过 25%。
  }
  // 三等分样式
  .threeEqualParts{
    flex: 1 1 33.3%; // 每个子盒子占 33.3% 的宽度，最多 2 个子盒子一行
    max-width: 33.3%; // 最大宽度为 33.3%，确保即使在一行中不足四个子元素时，每个子元素的宽度也不会超过 33.3%。
  }
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.backBtn{
  text-align: center;
}
</style>